<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>千峰商城</title>
    <script src="../utils/flexible.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/brandTitle.css" />
    <link rel="icon" href="../assets/imgs/facicon.ico" type="image/x-icon" />
  </head>
  <style type="text/css">
    @font-face {
      font-family: "qmt";
      src: url(../assets/font/qmt.ttf);
    }
    body {
      font-family: qmt;
    }
  </style>
  <body>
    <div class="header" id="top">
      <img src="../assets/imgs/header_logo.png" alt="" />
      <img src="../assets/imgs/header_app.png" alt="" />
    </div>
    <div class="searchbox">
      <input type="text" placeholder="请输入你想比价的产品" />
      <button style="color: white">
        <div style="font-family: qmt">搜索</div>
      </button>
    </div>

    <div class="nav">
      <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
    </div>

    <div class="divP">
      <p>热门品牌排行</p>
    </div>

    <div class="container">
      <ul>
        <li>
          <p>平板电视十大品牌 <i>▼</i></p>
          <ul>
            <li>
              <div><span>0</span> 三星液晶电视</div>
              <p>30天全网销售：11111件</p>
            </li>
          </ul>
        </li>
      </ul>
      <ul>
        <li>
          <p>平板电视十大品牌 <i>▼</i></p>
          <ul>
            <li>
              <div><span>0</span> 三星液晶电视</div>
              <p>30天全网销售：11111件</p>
            </li>
          </ul>
        </li>
      </ul>
      <ul>
        <li>
          <p>平板电视十大品牌 <i>▼</i></p>
          <ul>
            <li>
              <div><span>0</span> 三星液晶电视</div>
              <p>30天全网销售：11111件</p>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="footer">
      <div class="more">
        <a>更多优惠信息>></a>
      </div>
      <div class="chart">
        <span>品牌排行</span>
      </div>
      <ul>
        <li>登入</li>
        <li>注册</li>
        <li><a href="#top" style="color: black">返回顶部</a></li>
      </ul>
      <p>手机APP下载 万锋智慧商城手机版 -- 掌上比价平台</p>
      <p>chst.vip:8081/crm</p>
    </div>

    <script>
      let that;
      $.ajax({
        url: "http://chst.vip:1234/api/getbrandtitle",
      }).then((res) => {
        creatUl(res.result);
        $(".container>ul").on("click", "li", clickUlHandler);
      });

      function clickUlHandler(e) {
        let brandtitleid = $(this).attr("brandTitleid");
        $.ajax({
          url: `http://chst.vip:1234/api/getbrand`,
          data: {
            brandtitleid,
          },
        }).then((res) => {
          creatData(res.result, $(this));
        });
      }

      function clickDataHandler(e) {
        console.log(this);
        e.preventDefault();
        e.stopPropagation();
      }

      function creatData(data, El) {
        let html = "";
        // _id: "580ddb976b7bf3ad69711a0f"
        // brandId: 0
        // brandTitleId: 0
        // brandName: "三星平板电视"
        // brandInfo: "30天全网销售：242408件"
        // categoryId: 0
        data.forEach((item, index) => {
          html += `
                    <li brandtitleid="${item.brandTitleId}">
                        <div><span>${index}</span> ${item.brandName}</div>
                        <p>${item.brandInfo}</p>
                    </li>
                `;
        });
        $(this).find("ul").on("click", "li", clickDataHandler);
        if (!that) {
          El.find("ul").html(html).hide().show(500);
          that = El;
          console.log("初始化", that, El);
          return;
        }
        if (that.attr("brandTitleid") != El.attr("brandTitleid")) {
          El.find("ul").html(html).stop().hide().show(500);
          console.log("两次点击不一样", that, El);
          that.find("ul").html(html).slideToggle(500);
        } else {
          console.log("你点了同一个", that, El);
          El.find("ul").html(html).stop().slideToggle(500);
        }
        that = El;
      }

      function creatUl(data) {
        let html = "";
        // _id: "580dc33a6b7bf3ad697110e7"
        // brandTitleId: 0
        // brandTitle: "平板电视十大品牌"
        // categoryId: 0
        data.forEach((item, index) => {
          html += `
                    <li brandTitleid="${item.brandTitleId}" categoryId="${item.categoryId}">
                        <p> ${item.brandTitle} <i>▼</i></p>
                        <ul>
                            
                        </ul>
                    </li>
                `;
        });
        $(".container ul").html(html);
      }
    </script>
  </body>
</html>
